<template>
  <div class="container">
      <el-drawer custom-class="wxkj-drawer"
            :title="drawerTitle"
            :before-close="drawerClose"
            :visible.sync="drawerShow" size="500">
            <div class="drawer-content">
                <div class="ml30 mb20 f14">同事可通过手机号和验证码登录</div>
                <el-form ref="form"
                :model="form"
                  :rules="formRules" label-width="120px">
                  <el-form-item label="登录手机号：" required prop="phone">
                    <el-input placeholder="" v-model="form.phone" :disabled="disabled"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名：" required prop="name">
                    <el-input placeholder="" v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="接收简历邮箱：" required prop="email">
                    <el-input placeholder="" v-model="form.email"></el-input>
                  </el-form-item>
                  <el-form-item label="职位：" >
                    <el-input placeholder="" v-model="form.stationName"></el-input>
                  </el-form-item>
                  <el-form-item class="fr">
                    <el-button @click="drawerClose">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                  </el-form-item>
                </el-form>
            </div>
        </el-drawer>
  </div>
</template>

<script>
import {add,edit} from '@/api/colleague';
export default {
  components: {},
  props: {},
  data() {
    var mobileValidate = (rule, value, callback) => {
      if (!(/^1\d{10}$/.test(value))) {
      	callback(new Error('请准确填写手机号'))
      }
      callback()
    }
    return {
        drawerTitle: '新增',
        disabled: false,
        form: {
          id: '',
        phone: '',
        name: '',
        email: '',
        stationName: '',
        isCreate: true
      },
      formRules: {
        phone: [{ required: true, message: "请填写手机号" },{validator: mobileValidate, message: '请填写正确的手机号', trigger: 'blur' }],
        name: [{ required: true, message: "请填写姓名" }],
        email: [{ required: true, message: "请填写邮箱" },{ type: 'email', message: '请填写正确的邮箱', trigger: 'blur' }],
        stationName: [{ required: true, message: "请填写职位" }],
      },
        drawerShow: false
    };
  },
// 方法
  methods: {
      show(data) {
      if(data){
        this.form = data;
        this.disabled = true;
        this.drawerTitle = '编辑'
      }else{
         this.disabled = false;
      }
      this.drawerShow = true;
    },
     drawerClose() {
        this.form = {
          id: '',
        phone: '',
        name: '',
        email: '',
        stationName: '',
        isCreate: true
      }
      this.$nextTick(() => {
        this.$refs.form.resetFields();
       
      });
      this.drawerShow = false;
      this.$emit("refresh");
    },
    // 提交
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          if(form.id){
            form.updateTime = "";
          form.createTime = "";
          edit(form).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
                });
                this.drawerClose();
              
            });
          }else{
          add(form).then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
                });
                this.drawerClose();
              
            });
          }
        }
      });
    },
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
// 销毁
  destroyed() {}
};
</script>
<style lang="scss" scoped>
</style>